<template>
  <footer class="footer">
    <div class="footer-body">
      <div class="left-panel">
        <h1>关于我们</h1>
        <div v-for="item in Object.keys(info)" :key="item" class="item">
          <strong style="margin-right: 10px;">{{ item }}: </strong>
          <span class="text">{{ info[item] }}</span>
        </div>
      </div>
<!--      <div class="left-panel">-->
<!--        <h2>更多类别</h2>-->
<!--        <div v-for="item in Object.keys(productTypes)" :key="item" class="item">-->
<!--          <span>{{ item }}</span>-->
<!--          <span class="text">（{{ productTypes[item] }}）</span>-->
<!--        </div>-->
<!--      </div>-->
    </div>
    <div class="footer-bottom">
      <p class="copyright">
        &copy; 2022 <a href="#" class="copyright-link">Cheng-DX</a>. All Rights Reserved
      </p>
    </div>
  </footer>
</template>

<script>
export default {
  name: "TheFooter",
  data() {
    return {
      info: {
        "地址": '东北大学浑南校区',
        "电话": '020-89898989',
        "邮箱": '12e132@gmail.com',
        "微信": '982469hdocie',
      },
      productTypes: {
        "上衣": 11,
        "夏季新品": 89,
        "苹果产品": 99,
        "笔记本": 99,
      }
    }
  },
}
</script>


<style scoped>
.footer {
  --bg: #11151D;
  background-color: var(--bg);
  height: 500px;
  display: flex;
  flex-direction: column;
  color: rgb(207, 194, 194);
}

.footer-body {
  display: flex;
  flex-direction: row;
}

.left-panel {
  margin: 20px;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.left-panel::after {
  content: "";
  position: relative;
  bottom: 0;
  left: 0;
  width: 80%;
  height: 5px;
  background: rgb(198, 91, 20);
}

.item {
  display: flex;
  width: 100%;
  margin-block: 10px;
  transition: all 0.3s ease-in-out;
}

.item:hover {
  background: transparent;
  transform: translateX(30px);
  transition: all 0.3s ease-in-out;
}

.text {
  font-weight: bold;
}

.footer-img {
  width: 100%;
  height: 100%;
}
</style>
